<template>
    <div id="ConsoleNodeLoad" style="width: 100%; height: 100%; background: #ffffff; text-align: center">
        <div ref="consoleNodeLoad" :style="{ width:'100%',height:'100%' }"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: 'ConsoleNodeLoad',
        data() {
            return {
                chart: null,
                option: {
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    title: {
                        show: true,
                        text: '节点负载',
                        left: 'center',
                        top: 20
                    },
                    legend: {
                        left: 'center',
                        bottom: '15px'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    series: []
                },
            }
        },
        mounted() {
            this.initChart();
            this.$nextTick((_) => {
                setTimeout(() => {
                    this.chart.resize();
                }, 100)
            })
        },
        unmounted() {
        },
        methods: {
            setData: function (data) {
              console.log("data-----------", data);
                let xAxisData = [];
                let seriesData = [];
                data.forEach((item) => {
                    xAxisData.push(item.id);
                    seriesData.push(
                        {
                            name: '直播推流',
                            type: 'bar',
                            label: '直播推流',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [item.push]
                        },
                        {
                            name: '拉流代理',
                            type: 'bar',
                            label: '拉流代理',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [item.proxy]
                        },
                        {
                            name: '国标收流',
                            type: 'bar',
                            label: '国标收流',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [item.gbReceive]
                        },
                        {
                            name: '国标推流',
                            type: 'bar',
                            label: '国标推流',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [item.gbSend]
                        });
                });
                this.option.xAxis.data = xAxisData;
                this.option.series = seriesData;
                this.chart.setOption(this.option);
            },
            initChart() {
                this.chart = markRaw(echarts.init(this.$refs.consoleNodeLoad));
            }
        },
    }
</script>
